<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.push({ name: 'monitorIndex' })">返回</el-button>
    </div>
    <e-table
      ref="eTable"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :border="null"
      :total="total"
      @row-click="handleRowClick"
    >
      <el-table-column label="创建时间" slot="time" align="center">
        <template slot-scope="scope">{{ formatTime( scope.row.createTime ) }}</template>
      </el-table-column>
    </e-table>
    <!-- <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="12" v-for="(item,index) in rightArr" :key="index">
            <h3>1.耗材物资目录变更流程</h3>
            <p>创建者：黄丽萍 2020-05-15 17:48:01</p>
            <p>
              当前节点：
              <span>物流中心审核</span>
              <span>执行中</span>
            </p>
          </el-col>
        </el-row>
      </el-col>
    </el-row>-->
  </el-card>
</template>

<script>
import { getProcessStatusDetails } from '@/api/monitor'
import { getMonitorTime } from '@/utils/util'

export default {
  data() {
    return {
      rightArr: [],
      processTypeId: this.$route.query.processTypeId,
      processStatus: this.$route.query.processStatus,
      loading: false,
      tableData: [],
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      total: 1,
      columns: [
        {
          label: '流程名称',
          prop: 'proInsName'
        },
        {
          slot: 'time'
        },
        {
          label: '创建者',
          prop: 'userName'
        },
        {
          label: '当前节点',
          prop: 'currentTaskName'
        }
      ]
    }
  },
  created() {
    let param = getMonitorTime()
    if (this.processTypeId) {
      this.handleGetList({ ...param, processTypeId: this.processTypeId })
    } else {
      this.handleGetList({ ...param, processStatus: this.processStatus })
    }
  },
  methods: {
    // getProcessStatusDetails(param) {
    //   getProcessStatusDetails(param).then(res => {
    //     console.log('res', res.data)
    //   })
    // },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await getProcessStatusDetails(this.queryParam)
      if (res.data && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    },
    handleRowClick(row, column, event) {
      console.log('row', row, column, event)
      this.$router.push({
        path: '/workflow/bpmn/process',
        query: {
          procdefId: row.processDefinitionId, 
          deploymentId: row.processDeploymentId,
          taskId: row.currentTaskId,
          processInstanceId: row.proInsId,
          readonly: 1
        }
      })
    }
  }
}
</script>
